<template>
	<div class="arrDiv">
		<p>数组方法</p>
		<br />
		<p>{{arr01}}</p>
		<input type="text" v-model.lazy.trim="arr01_some" /><br />
		<button @click="getSome"> 在控制台输出该值在数组中的位置</button>
		<button @click="getEvery">在控制台输出执行getEvery</button>
		<button @click="getFilter">在控制台输出执行getFilter</button>
		
		
	</div>

</template>

<script>
	export default{
		data() {
			return{
				arr01:['111','245','1345','666'],
				arr01_some:3
			}
		},
		methods:{
			getSome(){
				let i=1;
				this.arr01.some((item,index)=>{
					console.log('arr.Some第'+i+'次循环');
					
					if(item===this.arr01_some){
						console.log(this.arr01_some+'在arr01数组的第'+i+'个位置');
						return true;
					}
					i++;
				})
			},
			getEvery(){
				//数组的every方法会遍历每个元素并判断,返回布尔值,只要有一个为false,则返回false,否则返回true
				const result = this.arr01.every(item => (item.length<5));
				console.log(result);
			},
			getFilter(){
				
				console.log("输出所有长度小于4的元素");
				//对数组进行过滤，返回一个过滤后的数组，可以对其进行forEach操作
				this.arr01.filter(item=>(item.length<4)).forEach(item=>{
					console.log(item);
				});
				
				
				//this.arr01.filter(item=>(item.length<4)).reduce((累加的结果，当前的循环项)=>{},初始值);
				const result = this.arr01.filter(item=>(item.length<4)).reduce((amt,item)=>{
					return amt+=item.length;
				},0);
				//等同于  const result = this.arr01.filter(item=>(item.length<4)).reduce((amt,item)=>{amt+=item.length},0);
				console.log("输出所有长度小于4的元素长度累加:"+result);
			}
		}
	}
</script>

<style>
	.arrDiv{
		padding: 0 20px 20px;
		background-color:gold;
		flex: 1;
	}
</style>